<template>
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="big-image">
        <van-image
          width="100%"
          :src="'http://local.bs.com/storage/'+goods.image"
        />
    </div>

    <div>
        <van-cell :title="goods.name" :value="goods.price" size="large" label="描述信息" />
    </div>

    <van-tabs v-model="active">
        <van-tab title="简介">
          <span class="text-intro">{{goods.introduction}}</span>
        </van-tab>
        <van-tab title="游戏内截图">
          <div v-for="image in goods.game_images" :key="image">
            <van-image
                width="100%"
                :src="'http://local.bs.com/storage/'+image"
            />
          </div>
        </van-tab>
    </van-tabs>

    <div>
        <van-submit-bar
          :price="goods.price*100"
          button-text="立即购买"
          tip-icon="info-o"
          @submit="onSubmit"
        />
    </div>

</template>

<script>
import {getGoodsDetail} from "@/api/goods";
import {createOrder} from "@/api/order";

export default {
    name: "Detail",
      data(){
        return {
          goods:{},
        };
      },
    created() {
      var id = this.$route.query.id;
      getGoodsDetail(id).then((res)=>{
        this.goods = res.data
      })
    },
    methods: {
      onClickLeft(){
        history.back()
      },
      onClickIcon() {

      },
      onClickButton() {
      },
      onSubmit(){
        var id = this.$route.query.id;
        createOrder(id).then((res)=>{
          if(res.code==200){
            this.$router.push('/order?id='+res.data.id)
          }
        })
      }
    },
  }
</script>

<style>
.text-intro{
  padding: 10px 40px;
  float: left;
}
</style>
